<template>
  <div class="facility-statistics">
    <div class="title">年龄占比</div>
    <dv-decoration-10 style="width: 90%; height: 5px" />

    <div class="content">
      <div class="item totalnum">
        <dv-digital-flop
          :config="configTotalNum"
          style="width: 100px; height: 50px"
        />
        <div class="label">统计人数</div>
      </div>

      <div class="item">
        <dv-capsule-chart
          :config="config"
          style="width: 240px; height: 240px"
          ref="capsuleChart"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      configTotalNum: {
        number: [1234],
        content: "{nt}人",
      },
      config: {
        data: [
          {
            name: "大于60岁",
            value: 167,
          },
          {
            name: "60-70岁",
            value: 67,
          },
          {
            name: "70-80岁",
            value: 123,
          },
          {
            name: "80-90岁",
            value: 55,
          },
          {
            name: "90岁以上",
            value: 98,
          },
        ],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "人",
        showValue: true,
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      //data值变化
      setInterval(() => {
        this.config.data.forEach((item) => {
          item.value = Math.floor(Math.random() * 1000);
        });
        this.configTotalNum.number = [Math.floor(Math.random() * 1000) + 1000];
        this.config = { ...this.config };
        this.configTotalNum = { ...this.configTotalNum };
      }, 4000);
    },
  },
};
</script>

<style scoped>
.facility-statistics {
  padding: 20px;
}
.title {
  font-size: 20px;
}

.content {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.totalnum {
  width: 250px;
  height: 240px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>